<template>
  <div class="app-container">
    <div class="app-container-flex">
      <NewFullScreen v-model="showDialog" title="派单规则" :needReturn="false">
        <div class="model-panel">
          <div class="model-panel-title">
            <p>派单模式</p>
          </div>
          <div class="model-panel-body">
            <!-- form -->
            <page-form
              class="paddingBox order-model-formBox flex_wrap_start_start"
              v-model:ref-obj="formInfo.ref"
              :disabled="formInfo.disabled"
              :data="formInfo.data"
              :field-list="formInfo.fieldList"
              :rules="formInfo.rules"
              :label-width="formInfo.labelWidth"
              @handleEvent="handleFromEvent"
            >
            </page-form>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>调度员</p>
          </div>
          <div class="model-panel-body">
            <page-filter
              v-model:query="filterInfo.query"
              :filter-list="filterInfo.list"
            >
              <template v-slot:filter-remove>
                <el-button :disabled="!canDelete" @click="remove()"
                  >删除</el-button
                >
              </template>
            </page-filter>
            <!-- 表格 -->
            <page-table
              :refresh="tableInfo.refresh"
              :init-curpage="tableInfo.initCurpage"
              v-model:data="tableInfo.data"
              :pager="true"
              :api="getPageDispatchUser"
              :tab-index="true"
              :field-list="tableInfo.fieldList"
              :handle="tableInfo.handle"
              :isDynamic="true"
              @handleEvent="handleEvent"
            ></page-table>
          </div>
        </div>
      </NewFullScreen>

      <selectUsers
        v-if="selectRepairUserInfo.visible"
        v-model:showDialog="selectRepairUserInfo.visible"
        :api="getPendDispatchUserList"
        :saveEmpty="true"
        :query="selectRepairUserInfo.query"
        @callback="selectRepairUserCallBack"
      />
    </div>
  </div>
</template>

<script setup name="dispatchOrderRule">
import {
  batchUpdateCoreSystemConfig,
  getCoreSystemConfigAll,
} from '@/api/core.js'
import PageFilter from '@/components/PageFilter/index'
import PageForm from '@/components/PageForm/index'

import PageTable from '@/components/PageTable/index'
import selectUsers from '@/components/SelectUsers/index'

import {
  getPageDispatchUser,
  batchCreateDispatchUser,
  deleteDispatchUser,
  getPendDispatchUserList,
} from '@/api/repair'

const showDialog = ref(true)
const fullInfo = ref({})
// 过滤相关配置
const filterInfo = reactive({
  query: {},
  list: [
    {
      type: 'button',
      label: '添加',
      event: add,
    },
    { type: 'slot', value: 'remove' },
  ],
})

// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    { label: '用户名', value: 'userName' },
    { label: '姓名', value: 'name' },
    {
      label: '联系电话',
      value: 'tel',
    },
    { label: '部门', value: 'deptName' },
  ],
  handle: {
    label: '操作',
    width: '50',
    btList: [
      {
        label: '删除',
        event: remove,
        show: true,
      },
    ],
  },
})

const formInfo = ref({
  ref: null,
  data: {
  },
  fieldList: [
    {
      label: '派单模式',
      labelTip:
        '自动派单：新建的工单，自动派单给报修的责任工程师，当责任工程师因个人或工作原因无法接单时，由责任工程师转交给其他工程师。',
      value: 'dispatch_order_rule',
      type: 'select-model',
      code: 'dispatch_order_rule',
    },
  ],
  labelWidth: '120px',
})
const selectRepairUserInfo = reactive({
  visible: false,
  saveEmpty: true,
  query: {},
})

const canDelete = computed(() => {
  return tableInfo.selections.length
})

onMounted(() => {
  getList()
  getFormData()
})

function handleFromEvent(event, val) {
  const data = []
  data.push({
    systemConfigName: '',
    systemConfigCode: 'dispatch_order_rule',
    value: val,
  })
  batchUpdateCoreSystemConfig(data)
}
function selectChange(val) {
  handleFromEvent('', val)
}
function getFormData() {
  let params = {
    systemConfigCode: 'dispatch_order_rule',
  }
  getCoreSystemConfigAll(params).then((resp) => {
    if (resp && resp.success) {
      const data = {}
      resp.data.forEach((item) => {
        data[item.systemConfigCode] = item.value
      })
      formInfo.value.data = data
    }
  })
}
// 获取列表
function getList() {
  tableInfo.refresh = Math.random()
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.selections = data
      break
  }
}
function add() {
  selectRepairUserInfo.visible = true
}
function selectRepairUserCallBack(data = []) {
  console.log(data)
  if (data.length) {
    let arr = []
    data.forEach((item) => {
      arr.push({
        userId: item.id,
        ...item,
      })
    })
    batchCreateDispatchUser(arr).then((resp) => {
      if (resp && resp.success) {
        getList()
      }
    })
  }
}

function remove(row = undefined) {
  let data = []
  if (row) {
    data.push(row.id)
  } else {
    tableInfo.selections.forEach((item) => {
      data.push(item.id)
    })
  }
  if (data.length) {
    deleteDispatchUser(data).then((resp) => {
      if (resp && resp.success) {
        getList()
      }
    })
  }
}
</script>

<style scoped lang="scss">
:deep(.el-select__tags) {
  flex-wrap: noWrap !important;
  overflow: hidden !important;
}
:deep(.el-tabs__content) {
  padding-top: 4px;
}
.model-panel,
.fullModel {
  border: none;
}
:deep(.layui-card-header) {
  border-bottom: 0 !important;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 1px !important;
}
</style>
